<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生命周期练习</title>
</head>

<body>
    <div id="app">
        {{ message }}
        <div v-for="i in 5">{{ i }}</div>
        <!-- v-for:列表渲染  表示元素循环5次 -->
    </div>

    <script src="./lib/vue.js"></script>
    <script>
        let index = 0
        let timer
        const vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js'
            },
            //创建阶段
            beforeCreate() {//还未将data中的数据注入挂载都vue实例下
                console.log('before create...', this.message)
            },
            created() {//已经将data中的数据注入挂载都vue实例下，可在该方法中发起网络请求，以请求页面初始渲染的数据
                console.log('created...', this.message)
                timer = setInterval(() => console.log(index++), 1000)
            },
            //挂载阶段，（将组件模板中所写的布局内容变成DOM树结构中的节点）
            beforeMount() {
                console.log('before mount...', this.$el)
            },
            mounted() {//在该方法中，可以获取到渲染后的 DOM 节点并处理。
                console.log('mounted...', this.$el)
            },
            //更新阶段,当 data 数据或 props 属性等发生变化时，触发
            beforeUpdate() {
                console.log('before update...')
            },
            updated() {
                console.log('updated...')
            },
            //销毁阶段,释放资源，一般会释放的资源：定时器，注册的事件监听，打开的网络请求
            beforeDestroy() {
                console.log('before destroy...')
                clearInterval(timer)
            },
            destroyed() {
                console.log('destroyed...')
            },
        })
    </script>
</body>

</html>